<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title>添加店铺商品</title>
		<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0" />
		<!--ios是否运行创建快捷启动方式-->
		<meta content="yes" name="apple-mobile-web-app-capable">
		<!--ios顶部通知栏的样式 黑色-->
		<meta content="black" name="apple-mobile-web-app-status-bar-style">
		<!--遇到数字不让转成电话号码格式-->
		<meta content="telephone=no" name="format-detection">
		<script src="js/remstyle.js"></script>
		<script src="js/jquery-1.7.2.min.js"></script>
		<script src="assets/mui/js/mui.min.js"></script>
		<script src="js/vue.js"></script>
		<script src="common/js/common.js"></script>
		<link rel="stylesheet" type="text/css" href="common/css/base.css" />
		<link rel="stylesheet" href="assets/mui/css/mui.min.css">
		<link rel="stylesheet" href="common/css/animate.css" />
		<style>
			#app {
				padding-top: 1.2rem;
			}
			
			.title {
				padding: 0 0.22rem;
				box-sizing: border-box;
				background-color: white;
				margin: 0;
				color: #595959;
			}
			
			.uplode {
				width: 100%;
				height: 2rem;
				background-color: white;
				padding: 0 0.22rem;
				box-sizing: border-box;
				display: flex;
				justify-content: space-around;
				align-items: center;
			}
			
			.inputTo,
			.inputPic,
			.inputPic div {
				width: 1.3rem;
				height: 1.3rem;
				background: url(img/product-add.png) no-repeat;
				background-size: 100%;
			}
			
			.inputPic div {
				overflow: hidden;
				background: none;
			}
			
			.inputTo input,
			.addpic-left input {
				display: flex;
				width: 100%;
				height: 100%;
				opacity: 0;
			}
			
			.inputPic {
				position: relative;
				background: none;
				border: 1px solid #EEEEEE;
			}
			
			.inputPic>span {
				display: flex;
				width: 0.5rem;
				height: 0.5rem;
				position: absolute;
				right: -0.2rem;
				top: -0.2rem;
			}
			
			.mui-input-group input {
				color: #CCCCCC;
				font-size: 0.3rem;
			}
			
			.mui-input-group label {
				font-size: 0.34rem;
			}
			
			.product-cate {
				height: 0.8rem;
				display: flex;
				justify-content: space-between;
				align-items: center;
				background: url(img/pppoo.png) no-repeat 7.1rem center;
				background-size: 3%;
				background-color: white;
				padding: 0 0.6rem 0 0.2rem;
				box-sizing: border-box;
			}
			/*--*/
			
			.product-list {
				width: 100%;
				height: 100%;
				background-color: rgba(0, 0, 0, 0.4);
				position: fixed;
				left: 0;
				top: 0;
				z-index: 99;
			}
			
			.product-list-to {
				animation: fadeIn 0.3s forwards;
			}
			
			.product-list-cate {
				position: absolute;
				left: 0;
				bottom: 0;
				width: 100%;
			}
			
			.product-list-cate-to {
				animation: fadeInUp 0.3s forwards;
			}
			
			.product-list ul {
				max-height: 5rem !important;
				overflow-y: scroll;
			}
			
			.product-detail {
				width: 100%;
				height: 100%;
				background-color: white;
				position: fixed;
				left: 0;
				top: 0;
				z-index: 999;
			}
			
			.detail-enter-active,
			.detail-leave-active {
				transition: all 0.5s ease;
			}
			
			.detail-enter,
			.detail-leave-to {
				left: 100%;
			}
			
			.product-detail .header {
				width: 100%;
				height: 0.8rem;
				background-color: #EEEEEE;
				position: absolute;
				left: 0;
				top: 0;
				padding: 0 0.22rem;
				box-sizing: border-box;
				font-size: 0.6rem;
				color: #595959;
				line-height: 0.8rem;
			}
			
			.addpic {
				margin: 1rem auto 0.3rem;
				width: 90%;
				height: 2.5rem;
				border: 1px solid #EEEEEE;
				display: flex;
				justify-content: flex-start;
				align-items: center;
				padding: 0 0.33rem;
				box-sizing: border-box;
			}
			
			.addpic-left {
				width: 1.8rem;
				height: 1.8rem;
				overflow: hidden;
				background: url(img/product-add.png) no-repeat;
				background-size: 100%;
				margin-right: 0.33rem;
			}
			
			.all-pic {
				width: 90%;
				margin: 0 auto;
				max-height: 8.8rem;
				overflow-y: scroll;
			}
			
			.pic-contain {
				border: 1px solid #EEEEEE;
				column-count: 2;
				column-gap: 0;
			}
			
			.pic-list {
				border: 1px solid #EEEEEE;
				break-inside: avoid;
				box-sizing: border-box;
				padding: 0.2rem;
				margin-bottom: 0.2rem;
			}
		</style>
	</head>

	<body>
		<div id="app">

			<header id="header" class="mui-bar mui-bar-nav">
				<a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left" style="color: #CCCCCC;"></a>
				<h1 class="mui-title">添加店铺商品</h1>
			</header>

			<p class="title">商品图片(图片为3张，最佳尺寸800 x 800px)</p>
			<p class="title">第一张图片为封面展示</p>
			<div class="uplode">
				<div class="inputPic" v-for="(item,index) in picList" :key="index">
					<div>
						<img :src="item" alt="" />
					</div>
					<span @click="removePic(index,item)">
						<img src="img/newbox-x.png"/>
					</span>
				</div>

				<div class="inputTo" v-show="flagInput">
					<input type="file" name="file" id="input_file" @change="imgPreview(this)" >
				</div>

			</div>

			<form class="mui-input-group">
				<div class="mui-input-row" style="margin: 0.2rem 0 0;">
					<label>商品名字:</label>
					<input type="text" class="mui-input-clear" v-model="Pone" placeholder="请输入商品名字">
				</div>
				<p style="border-bottom: 0.2rem solid #EFEFF4;"></p>
				<div class="mui-input-row">
					<label>商品价格:</label>
					<input type="text" class="mui-input-clear" v-model="Ptwo" placeholder="请输入商品价格">
				</div>
				<div class="mui-input-row">
					<label>商品库存:</label>
					<input type="text" class="mui-input-clear" v-model="Pthree" placeholder="请输入商品库存">
				</div>
				<div class="mui-input-row">
					<label>商品颜色:</label>
					<input type="text" class="mui-input-clear" v-model="Pfour" placeholder="请输入商品颜色">
				</div>
				<div class="mui-input-row">
					<label>商品规格:</label>
					<input type="text" class="mui-input-clear" v-model="Pfive" placeholder="请输入商品规格">
				</div>
			</form>

			<div class="mui-input-group product-cate" style="margin: 0.2rem 0;">
				<span style="font-size: 0.34rem;">商品分类</span>
				<span @click="flag=!flag" style="font-size: 0.28rem; color: #CCCCCC;">{{cateNow}}</span>
			</div>
			<div :class="['product-list',flag?'product-list-to':'']" v-show="flag" @click="flag=!flag">
				<ul :class="['mui-table-view','product-list-cate',flag?'product-list-cate-to':'']">
					<li class="mui-table-view-cell" v-for="(item,index) in storeCate" :key='index' @click="cateChoose(item.id,item.typeName)">{{item.typeName}}</li>
				</ul>
			</div>

			<div v-show="detail" class="mui-input-group product-cate" style="margin: 0.2rem 0;">
				<span style="font-size: 0.34rem;">商品详情:</span>
				<span @click="flagTwo=!flagTwo" style="font-size: 0.28rem; color: #CCCCCC;">添加商品详情图</span>
			</div>
			<transition name="detail">
				<div class="product-detail" v-show="flagTwo">
					<div class="header">
						<span @click="flagTwo=!flagTwo" style="width: 30%; height: 100%; display: inline-block;"><</span>
					</div>
					<div class="addpic">
						<div class="addpic-left">
							<input type="file" name="file" id="input_file_two" @change="imgPreviewTwo(this)" />
						</div>
						<div class="addpic-right">
							<p style="font-size: 0.30rem;">1.商品图片（最佳尺寸800*800px）</p>
						</div>
					</div>
					<div class="all-pic">
						<div class="pic-contain">
							<div class="pic-list" v-for="(item,index) in picCateList" :key="index" @click="removePicTwo(index, item)">
								<img :src="item" />
							</div>
						</div>
					</div>
				</div>
			</transition>

			<button @click="commitUp" type="button" class="mui-btn mui-btn-primary" style="width: 90%; margin-left: 5%; margin-top: 0.4rem;height: 0.8rem;">提交</button>
		</div>
	</body>
	<script>
		var vm = new Vue({
			el: "#app",
			data: {
				picList: [],
				storeCate: [],
				cateNow: '请选择分类',
				cateId: '',
				picCateList: [],
				allPicList:[],
				detail:false,
				flag: false,
				flagTwo: false,
				flagInput:true,
				Pone: '',
				Ptwo: '',
				Pthree: '',
				Pfour: '',
				Pfive: '',
			},
			created() {
				this.storeCategory();
			},
			methods: {
				imgPreview(fileDom) {
					var that = this;
					var formData = new FormData();
					formData.append('file', $('#input_file')[0].files[0]);
					mui.ajax(window.address + "/goods/imgUpload", {
						type: 'POST',
						cache: false,
						data: formData,
						processData: false,
						contentType: false,
						success: function(data) {
							console.log(data);
							var newImg = data.data;
							that.picList.push(newImg);
							if(that.picList.length>=3){
								that.flagInput = false;
								that.detail = true;
							}
							console.log(newImg);
							console.log(that.picList);
						}
					})
				},
				imgPreviewTwo(fileDom) {
					var that = this;
					var formData = new FormData();
					formData.append('file', $('#input_file_two')[0].files[0]);
					mui.ajax(window.address + "/goods/imgUpload", {
						type: 'POST',
						cache: false,
						data: formData,
						processData: false,
						contentType: false,
						success: function(data) {
							console.log(data);
							var newImg = data.data;
							that.picCateList.push(newImg);
							console.log(that.picCateList);
						}
					})
				},
				removePic(index, item) {
					var that = this;
					that.picList.splice(index, 1);
					that.flagInput = true;
					that.detail = false;
					mui.ajax(window.address + '/goods/deleteImg', {
						type: 'post',
						data: {
							imageUrl: item
						},
						dataType: 'json',
						success: function(data) {
							console.log(data)
						}
					})
				},
				removePicTwo(index, item) {
					var that = this;
					mui.confirm('确定删除吗？', '提示', function(e) {
						if(e.index == 1) {
							that.picCateList.splice(index, 1)
							mui.ajax(window.address + '/goods/deleteImg', {
								type: 'post',
								data: {
									imageUrl: item
								},
								dataType: 'json',
								success: function(data) {
									console.log(data)
								}
							})
						}
					})

				},
				storeCategory() {
					var that = this;
					mui.ajax(window.address + '/goods/findBayUuidAndTypes', {
						type: 'get',
						data: {
							"userUuid": CD.geturl().business
						},
						dataType: 'json',
						success: function(data) {
							that.storeCate = data.bayUuidAndTypes;
							console.log(that.storeCate);
						}
					})
				},
				cateChoose(cateId, cateNow) {
					var that = this;
					that.cateId = cateId;
					that.cateNow = cateNow;
					console.log(that.cateNow);
					console.log(that.cateId);
				},
				commitUp(){
					var that = this;
					if(that.picList.length<3){				
						mui.toast('图片至少为三张');
						return false;
					};
					var newProductRange = [that.Pone,that.Ptwo,that.Pthree,that.Pfour,that.Pfive,that.cateId];
					for(var i=0;i<newProductRange.length;i++){
						if(newProductRange[i].length==''){
							mui.toast('请将商品信息填写完整！');
							return false;
						}
					}
						that.allPicList = that.picList.concat(that.picCateList);
						console.log(that.allPicList,123456);					
						mui.ajax(window.address + "/goods/saveBayUuid",{
							async : false,
        					cache : false,
        					traditional: true,
							type:'get',
							xhrFields: {
								withCredentials: true
							},
							crossDomain: true,
							data:{
								img:that.allPicList,
								goodsName:that.Pone,
								goodsPrice:that.Ptwo,
								goodsQuantity:that.Pthree,
								goodsColour:that.Pfour,
								goodsSize:that.Pfive,
								goodsType:that.cateId,
								goodsImg:that.allPicList[0],
								token:getCookieValue("token"),
							},
							dataType:'json',
							success:function(data){
								console.log(data);
								if(data == 1){
									window.location.href = 'v-store.html?business='+CD.geturl().business;
								}else{
									mui.toast('数据错误！')
								}
								
							}
						});
				}

			}

		});
	</script>

</html>